<template>
    <view class="detail">
        <SRV-topbar title="拼团商品详情" messageNum='0' isLeft='true'></SRV-topbar>
        <uni-swiper-dot :info="info.covers" :dotsStyles="dotsStyles" :current="current" field="content" :mode="mode">
            <swiper class="swiper-box" @change="change" interval="3000" duration="500" circular="true" autoplay="true">
                <swiper-item v-for="(item, index) in info.covers" :key="index">
                    <view class="swiper-item">
                        <image :src="item.imgUrl" mode="aspectFill">
                        </image>
                    </view>
                </swiper-item>
            </swiper>
        </uni-swiper-dot>
        <view class="info">
            <view class="top">
                <view class="title">
                    <view>{{info.name}}</view>
                </view>
                <view class="pic">
                    <text>拼团价：￥{{info.scrabble_price}}</text>
                    <text v-if="info.market_price > 0">门市价：￥{{info.market_price}}</text>
                    <text :class="'state_'+info.condition.state">{{info.condition.message}}</text>
                </view>
            </view>
            <view class="friend">
                <view>拼团好友</view>
                <view v-for="(optionItem, index) in info.friendList" :key="index">{{optionItem.username}}({{optionItem.mobile}})</view>
                
            </view>
        </view>
		<view class="content">
		    <view class="content_title">拼团商品说明</view>
			<view class="details" v-html="info.ruleInfo" style="font-size: 32rpx;"></view>
		</view>
        <view class="content">
            <view class="content_title">商品详情</view>
            <view class="details" v-html="info.intro"></view>
        </view>
        <view :class="'bottom ' + (info.condition.state == 1 ? '' : 'noBuy')" :style="'height:' + bottomHeight + 'rpx;'" @click="subScrabbel()">{{info.condition.message}}</view>
    </view>
</template>


<script>
    var _self;
    import serve from '../../static/request.js';
    // import storage from '../../static/appkey.js';
    import common from '../../static/jump.js';
    import ShareIndex from '../../static/share.js';
    import {Base64} from '../../static/base64.min.js';
    export default {
        mixins: [ShareIndex],
        data() {
            return {
                mode: 'round',
                current: 0,
                dotsStyles: {
                    backgroundColor: 'rgba(255,255,255,0.3)',
                    selectedBackgroundColor: '#FFC600',
                    selectedBorder: '1px rgba(255,198,0,1) solid',
                    border: '1px rgba(255,255,255,0.3) solid',
                    selectedBorder: '1px rgba(255,198,0,1) solid'
                }, //轮播图样式配置
                reductionRemark: '',
                id: 0,
                storeType: 1,
                parentKey: '',
                info: {
                    id: 0,
                    name: '商品名称',
                    cate_name: '',
                    brand_name: '',
                    series_name: '',
                    memberRole: 0,
                    scrabble_price: 0,
                    cost_price: 0,
                    market_price: 0,
                    sales: 0,
                    stock: 0,
                    fee: '包邮',
                    reductionName: '',
					btnName: '',
					ruleInfo : '',
                    covers: []
                },
                bottomHeight: 110,
                /* 底部按钮高度，避免iPhonex导航黑条 */
            }
        },
        methods: {
            change(e) {
                _self.current = e.detail.current;
            },
            getInfo() {
                serve.request({
                    url: '/store/draw/scrabble',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        id: _self.id,
                        parentKey: _self.parentKey,
                    },
                    v: '/v2'
                }).then(res => {
                    if (res.code != 200) {
                        uni.showToast({
                            title: res.message,
                            icon: 'none',
                            success: function() {
                                setTimeout(function() {
                                    common.jump('return_one')
                                }, 2000)
                            }
                        });
                        return;
                    }
                    _self.info = res.data;
                    _self.info.intro = Base64.decode(res.data.intro).replace(/\<img/gi, '<img style="max-width:100%;height:auto;vertical-align:top;outline-width:0px;" ');
                    _self.info.ruleInfo = Base64.decode(res.data.ruleInfo);
                    
                    this.shareItem.title = this.info.name;
                    this.shareItem.imageUrl = this.info.picture;
                    this.shareItem.path = '/pages/store/scrabble?id=' + this.info.id +  '&parentKey=' + uni.getStorageSync('parentKey');
                    this.shareItem.linePaht = '/pages/store/scrabble';
                    this.shareItem.query = 'id=' + this.info.id + '&parentKey=' + uni.getStorageSync('parentKey');
                });
            },
            subScrabbel() {
				if(_self.info.condition.state != 1) {
					// uni.showModal({
					// 	title: '提示',
					// 	content:  _self.info.condition.message,
					// 	showCancel:false,
					// 	confirmText:'确定'
					// });
					return ;
				}
                uni.navigateTo({
                    url: '/pages/store/subScrabble?type=buy_now&sku_id='+_self.info.sku_id
                });
            },
            jump(jump_type, jump_link) {
                common.jump(jump_type, jump_link);
            }
        },
        onLoad(options) {
            _self = this;
            if (uni.getSystemInfoSync().safeAreaInsets.top > 20) {
                _self.bottomHeight = 178;
            }
            _self.id = options.id || 0;
            console.info(_self.id);
            _self.parentKey = options.parentKey || '';
            if (_self.parentKey) {
                uni.setStorageSync('parentKey', _self.parentKey);
            } else {
                _self.parentKey = uni.getStorageSync('parentKey');
            }
            if (_self.id == 0) {
                uni.showToast({
                    title: "错误的访问方式",
                    icon: 'none',
                    success() {
                        setTimeout(function() {
                            common.jump('return_one')
                        }, 2000)
                    }
                });
            }
            _self.getInfo();
        },
        onPullDownRefresh() {
            _self.getInfo();
        }
    }
</script>

<style scoped lang="scss">
    .detail {
        padding-bottom: 120upx;

        .bottom {
            width: 100%;
            height: 100upx;
            line-height: 100upx;
            text-align: center;
            font-size: 32upx;
            color: rgba(255, 255, 255, 1);
            background: rgba(251, 202, 63, 1);
            bottom: 0upx;
            position: fixed;
            z-index: 9;
        }
		
		.noBuy {
			background: #b1a6a6;
			color: #000;
		}

        .swiper-box {
            width: 100%;
            height: 750upx;

            .swiper-item {
                width: 100%;

                image {
                    width: 100%;
                    height: 750upx;
                }
            }
        }

        .info {
            box-sizing: border-box;
            padding: 20rpx 10rpx 0 20rpx;
            border: 8upx solid #cac5c5;
            border-radius: 20upx;
            
            .top {
                position: relative;
                .pic {
                    display: flex;
                    align-items: center;
                    align-items: center;
                    text:nth-child(1) {
                        font-size: 40upx;
                        color: #FFBC00;
                        margin-right: 10upx;
                    }
                    text:nth-child(2) {
                        font-size: 30upx;
                        color: #5f5b5b;
                        margin-left: 30upx;
                        text-decoration: line-through;
                    }
                }
                .title {
                    view {
                        margin-bottom: 20upx;
                        color: #999;
                    }

                    view:first-child {
                        font-size: 32upx;
                        font-weight: bold;
                        color: #000000;
                    }

                    .state {
                        padding: 5upx 8upx;
                        text-align: center;
                        color: #FFFFFF;
                        font-size: 32upx;
                        border-radius: 2upx;
                        margin-right: 10upx;
                    }
                }
            }
            
            .friend {
                display: flex;
                flex-direction: column;
                justify-content: center;
                font-size: 32rpx;
                view {
                    padding: 10rpx 20rpx;
                }
                view:first-child{
                    padding: 0 0 10rpx 0rpx;
                    font-size: 34rpx;
                }
            }
        }

        .line {
            display: flex;
            padding: 47upx 31upx;
            justify-content: space-between;
            align-items: center;
            border-bottom: 16upx #FBFBFD solid;

            .left {
                display: flex;
                font-size: 28upx;
                align-items: center;

                text:last-child {
                    margin-left: 30upx;
                    color: rgba(57, 72, 107, 0.3);
                }
            }

            .right {
                position: relative;
                font-size: 28upx;
                color: rgba(57, 72, 107, 0.5);
                padding-right: 23upx;
            }

            .right::before {
                position: absolute;
                right: 0upx;
                top: -2upx;
                content: '';
                border: 1upx solid #CCCCCC;
                border-width: 0 1upx 1upx 0;
                padding: 6upx;
                transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
            }
        }

        .line1 {
            display: flex;
            padding: 47upx 31upx 0upx;
            justify-content: space-between;
            align-items: center;

            .left {
                display: flex;
                font-size: 28upx;
                align-items: center;

                text:last-child {
                    margin-left: 10upx;
                }
            }

            .right {
                position: relative;
                font-size: 24upx;
                color: rgba(57, 72, 107, 0.5);
                padding-right: 23upx;
            }

            .right::before {
                position: absolute;
                right: 0upx;
                top: 10upx;
                content: '';
                border: 1upx solid #CCCCCC;
                border-width: 0 1upx 1upx 0;
                padding: 6upx;
                transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
            }
        }


        .content {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            padding: 20upx 10upx;
            border-bottom: 16upx rgba(251, 251, 253, 0.8) solid;

            .details {
                font-size: 0upx;
                line-height: 45upx;
                padding-top: 37upx;

                ::v-deep {

                    img,
                    p,
                    span {
                        width: 100%;
                    }
                }
            }

            // .details >>> img,p,span {
            //   width: 100%;
            // }

            .content_title {
                position: relative;
                margin-left: 20rpx;
                font-size: 32rpx;
                padding: 10rpx 20rpx;
                text-align: left;
                height: 24rpx;
                line-height: 24rpx;
            }

            .content_title::before {
                content: '';
                position: absolute;
                left: 0;
                top: 10upx;
                width: 6upx;
                height: 24upx;
                background: rgba(255, 198, 0, 1);
                border-radius: 2upx;
            }
        }
		
		.state_0{
		    color: #ff000f;
		    font-size: 42rpx;
			font-weight: 600;
			margin-left: 20rpx;
		}
		.state_1{
		    color: #FFBC00;
		    font-size: 42rpx;
			font-weight: 600;
			margin-left: 20rpx;
		}
		.state_2{
		    color: #0b44ea;
		    font-size: 42rpx;
			font-weight: 600;
			margin-left: 20rpx;
		}
    }
</style>
